<template>
	<view class="main">
		<uni-collapse @change="handleChangeCollapse">
			<uni-collapse-item :title="isCollapse ? '关闭日历' : '打开日历'" :open="true">
				<uni-calendar :insert="true" :lunar="true" :start-date="'2023-1-1'" :end-date="'2099-12-30'"
					@change="change" />
			</uni-collapse-item>
		</uni-collapse>

		<view class="list padding-project">
			<view v-if="list===null" class="load loading text-l text-grey"></view>
			<text v-if="list.length==0" class="no-project icon-emoji text-l text-grey"> 本日暂无预定记录~</text>
			<view class="item card-project shadow-project" v-for="(item, index) in list" :key="index"
				@click="handleToDetail">
				<view v-if="index%4==0" class="left bg-blue bg-project"></view>
				<view v-else-if="index%4==1" class="left bg-green"></view>
				<view v-else-if="index%4==2" class="left bg-orange"></view>
				<view v-else class="left bg-cyan"></view>
				<block v-if="item.pic">
					<image class="img loading" :src="item.pic" mode="aspectFill" />
				</block>
				<view class="title text-cut">{{item.title}}</view>
				<view class="time flexR-FS-C">
					<i class="iconfont title_icon mr10">&#xe8b8;</i>
					{{item.timeDesc}}
				</view>
			</view>
		</view>

		<tabbar />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isCollapse: true,
				list: [{
						title: "研发部例会",
						timeDesc: "09:00"
					},
					{
						title: "需求评审会",
						timeDesc: "13:00"
					},
					{
						title: "APP设计评审会",
						timeDesc: "15:00"
					}
				]
			}
		},
		methods: {
			handleChangeCollapse(e) {
				this.isCollapse = e.length > 0
			},

			handleToDetail() {
				uni.navigateTo({
					url: '/sub-meeting/enroll_my_join_detail'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bg-blue {
		background-color: #347DFF !important;
		color: #ffffff !important;
	}

	.bg-green {
		background-color: #39b54a !important;
		color: #ffffff !important;
	}

	.bg-orange {
		background-color: #f37b1d !important;
		color: #ffffff !important;
	}

	.shadow-project {
		box-shadow: 6rpx 6rpx 8rpx rgba(216, 220, 223, 0.5);
	}

	.main {
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.main .plan-date {
		width: 100%;
		position: sticky;
		top: 0;
		z-index: 999;
		box-shadow: var(--ShadowSize) var(--greyShadow);
	}

	.main .list {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		padding: 30rpx 0;
		box-sizing: border-box;
	}

	.main .list .item {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		background-color: #fff;
		margin-bottom: 30rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.main .list .item .left {
		width: 8rpx;
		height: 100rpx;
		margin-right: 15rpx;

	}

	.main .list .item .img {
		width: 65rpx;
		height: 65rpx;
		border-radius: 10rpx;
		position: relative;
	}

	.main .list .item .title {
		flex: 1;
		text-align: left;
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-left: 20rpx;
	}

	.main .list .item .time {
		width: 140rpx;
		text-align: right;
		font-size: 26rpx;
		color: #999;
	}

	.main .list .no-project {
		padding: 30rpx 30rpx;
		font-size: 28rpx;
	}
</style>